
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台>数据统计>分销商销售情况</div>
          <div class="hei10"></div>
        <div v-loading="loading">
          <div class="tabs">
            <router-link class="tab" to="/dataExcel/store_report">店铺销售情况</router-link>
            <router-link class="tab active" to="/dataExcel/distributors_report">分销商销售情况</router-link>
          </div>
          <div>
            <div class="btn-box">
              <div class="search">
                <el-input v-model="form.merchant_name" placeholder="请输入分销商"></el-input>
                <el-button type="danger" @click="searchBtn">检索</el-button>
              </div>
              <el-button :type="form.day ? 'danger' : ''" @click="timechange('day')">今天</el-button>
              <el-button :type="form.yesterday ? 'danger' : ''" @click="timechange('yesterday')">昨天</el-button>
              <el-button :type="form.week ? 'danger' : ''" @click="timechange('week')">最近一周</el-button>
              <el-button :type="form.month ? 'danger' : ''" @click="timechange('month')">最近30天</el-button>
              <el-date-picker
                style="width: 400px;margin-left: 10px;"
                v-model="form.time"
                @change="timechange"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="——"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </div>
            <div class="con">
              <div class="list">
                <div class="th">分销商</div>
                <div class="th">订单数量</div>
                <div class="th">审核通过数量</div>
                <div class="th">生产发货数量</div>
                <div class="th">操作</div>
              </div>
              <div class="list " v-for="item in list.rows.data" :key="item.child_id">
                <div class="td">{{item.name}}</div>
                <div class="td">{{item.orders_all_amount}}</div>
                <div class="td">{{item.submit_all_amount}}</div>
                <div class="td">{{item.deliver_all_amount}}</div>
                <div class="td">
                  <div class="seebtn" @click="seeSale(item.child_id)">查看销售构成</div>
                </div>
              </div>
            </div>
            <div class="fenye">
              <el-pagination
                background
                layout="total,prev, pager, next"
                :current-page="page"
                @current-change="fanye"
                :page-size="page_size"
                :total="total"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <foot></foot> -->
  </div>
</template>

</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
  import foot from "@/components/foot.vue"
  import moment from 'moment'
	export default{
		components: {
			left: left,
			top: top,
      foot: foot
		},
		name : "distributors_report",
		data(){
			return {
        loading: false,
        form: {
          merchant_name: '',
          day: 'day',
          yesterday: '',
          week: '',
          month: '',
          time: '',
          start_time: '',
          end_time: ''
        },
        list: {
          rows: {
            data: []
          }
        },
        total: 0,
        page: 1,
        page_size: 20,
			}
		},
		created() {
      this.loading = true

      this.form.end_time = moment()
      .format("YYYY-MM-DD");
      this.form.start_time = moment()
      .format("YYYY-MM-DD");
      this.getData()
		},
		mounted(){

		},
		methods: {
      //选择时间
      timechange: function(val) {
        this.form.day = "";
        this.form.yesterday = "";
        this.form.week = "";
        this.form.month = "";
        this.form.time = "";
        switch (val){
          case 'day':
            this.form.day = "day";
            this.form.end_time = moment()
            .format("YYYY-MM-DD");
            this.form.start_time = moment()
            .format("YYYY-MM-DD");
            break;
          case 'yesterday':
            this.form.yesterday = "yesterday";
            this.form.end_time = moment()
            .subtract(1, "days")
            .format("YYYY-MM-DD");
            this.form.start_time = moment()
            .subtract(1, "days")
            .format("YYYY-MM-DD");
            break;
          case 'week':
            this.form.week = "week";
            this.form.end_time = moment()
            .format("YYYY-MM-DD");
            this.form.start_time = moment()
            .subtract(7, "days")
            .format("YYYY-MM-DD");
            break;
          case 'month':
            this.form.month = "month";
            this.form.end_time = moment()
            .format("YYYY-MM-DD");
            this.form.start_time = moment()
            .subtract(30, "days")
            .format("YYYY-MM-DD");
            break;
          default:
            this.form.time = val;
            this.form.end_time = val[1];
            this.form.start_time = val[0];
            break;
        }
        this.loading = true
        this.getData()
      },
      //翻页
      fanye: function(val) {
        this.page = val;
        this.loading = true;
        this.getData();
      },
      seeSale:function (id) {
        this.$router.push({
          path: "/dataExcel/distributors_sale",
          query: { id: id }
        });
      },
      searchBtn: function () {
        this.loading = true
        this.getData()
      },
      getData: function () {
        var url = `/api/plan-market/data/merchant?start_date=${this.form.start_time}&end_date=${this.form.end_time}}&merchant_name=${this.form.merchant_name}&page=${this.page}&page_size=${this.page_size}`
        axios.get(url).then(response => {
          if(response.data.msg.code == 0){
            this.list = response.data.data
            this.total = response.data.data.rows.total
            this.loading = false
          }
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
  .index {

        .tabs{
          background: #f9f9f9;display: flex;
          .tab{
            flex-basis: 160px;line-height: 45px;display: block;color: #727272;border-top: 2px solid #f9f9f9;font-size: 14px;text-align: center;cursor: pointer;
          }
          .active{
            border-top: 2px solid #dd2727;background: #fff;
          }
        }

    .btn-box{
      display: flex;padding: 22px 20px 25px 20px;align-items: center;justify-content: flex-end;
      .search{
         margin-right: 180px;
         /deep/ .el-button--danger{
          padding: 9px 20px!important;
          border-radius: 4px;
        }
      }
      /deep/ .el-input {
        line-height: 32px;
        width: 170px;
      }
      /deep/ .el-button--danger{
        padding: 9px 10px!important;
      }
      /deep/ .el-button{
        padding: 9px 10px;
        line-height: 14px;
        border-radius: 0;
      }

      /deep/ .el-date-editor .el-range__icon{
        height: 32px;
      }
    }
    .con{
      .list{
        margin: 0 auto;width: 1123px;display: flex; text-align: center; color: #646464; line-height: 45px; border-top: 1px #D8D8D8 solid; border-bottom: 1px #D8D8D8 solid; margin-top: -1px;
        .th{ flex: 1; background: #EEEEEE; font-size: 14px;}
        .td{ flex: 1; font-size: 14px;
          .seebtn{color: #197CFF;cursor: pointer;}
        }
        .th:first-child,.td:first-child{border-left: 1px #D8D8D8 solid;}
        .th:last-child,.td:last-child{border-right:1px #D8D8D8 solid;}
        .t-total{background: #D9F0FF;}
        .tf{background: #F9F9F9;}
      }
      .seemore{
        margin: 20px 0;line-height: 35px;font-size: 14px;display: flex;justify-content: center;
        .morebtn{padding: 0 30px;color: #2488CB;background: #B1E4FF;cursor: pointer;}
      }
    }
    .fenye {
      text-align: right;
      margin: 20px 10px;
    }
  }
</style>
